<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>博客详情界面</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #EFEFEF;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.top {
	width: 1000px;
	height: 104px;
	background-color: #FFFFCC;
	border-radius: 10px;
	padding: 20px 0px 25px;
	margin: auto;
}

.login {
	float: left;
}

.top-word {
	float: left;
	width: 435px;
	line-height: 30px;
	margin-top: 25px;
	color: #646060;
	text-align: center;
}

.top-image {
	float: left;
	width: 149px;
	text-align: right;
}

.navigation_bar {
	width: 1000px;
	border-radius: 5px;
	background-color: #66CCCC;
	margin: 5px auto;
	box-shadow: 2px 2px 2px #bdbdbd;
	height: 50px;
}

.navigation_bar li {
	float: left;
	line-height: 34px;
	border-radius: 5px;
	padding: 9px 55.43px;
}

.navigation_bar li a {
	color: white;
	cursor: pointer;
}

.navigation_bar li:hover {
	background-color: #F15694;
}

.center {
	width: 1000px;
	margin: auto;
	margin-top: 30px;
	background-color: #FFFFCC;
}

.center_one {
	float: left;
	width: 680px;
	background-color: #FEFBFB;
}

.center_two1 {
	float: right;
	width: 300px;
}

.h1_tilte {
	font-size: 20px;
	font-weight: 500;
	color: #0088db;
	text-align: center;
	padding: 12px 0;
}

.detail_info_box {
	height: 30px;
	color: #ac5a24;
	margin-top: 10px;
	line-height: 30px;
	border: 1px dashed #999;
	border-left: 0;
	border-right: 0;
	text-align: center;
	overflow: hidden;
}

.content {
	line-height: 35px;
	padding: 10px;
	text-indent: 2em;
}

.center_two_detail {
	width: 300px;
	background-color: #F9F9FB;
	border-radius: 5px;
	line-height: 30px;
	color: #575656;
	font-size: 14px;
}

.center_two_detail a {
	color: #E25817;
}

.center_two_detail a:hover {
	text-decoration: underline;
}

.hot_recommend {
	background-color: white;
	margin-top: 20px;
}

.display_two_plane {
	width: 275px;
	background-color: white;
	margin-bottom: 20px;
	position: relative;
}

.display_two_ul {
	background-color: white;
}

.display_two_ul li {
	width: 235px;
	line-height: 38px;
	margin-left: 40px;
	color: #919090;
}

.display_two_ul li:hover {
	padding-left: 20px;
}

.display_two_ul li a {
	color: #526163;
}

.display_two_ol1 {
	position: absolute;
	top: -5px;
}

.display_two_ol1 li {
	width: 20px;
	list-style: none;
	text-align: center;
	line-height: 20px;
	margin: 18px;
	margin-left: 8px;
	background-color: #EF8261;
	color: white;
	border-radius: 5px;
}

.discuss {
	clear: both;
	width: 680px;
	margin-top: 20px;
	border-top: 1px dashed #8B8888;
}

.discuss_text {
	width: 643px;
	margin: 10px auto;
}

.discuss_text textarea {
	border-radius: 8px;
	resize: none;
	font-size: 14px;
	color: #BFBFBF;
	line-height: 20px;
	border: 1px solid #4398ED;
}

.discuss_login input {
	background-color: #4398ED;
	color: white;
	margin-left: 25px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	line-height: 29px;
	width: 80px;
}

.discuss_login input:hover {
	background-color: #0084FF;
}

.leftone {
	float: left;
	margin-left: 520px;
}

.lefttwo {
	float: left;
}

.discussed {
	width: 643px;
	margin: 10px auto;
	height: 29px;
	border-bottom: 1px solid #4398ED;
}

.discussed li {
	width: 70px;
	text-align: center;
	color: #4398ED;
	font-size: 18px;
	line-height: 30px;
	font-weight: bolder;
	border-radius: 5px;
	border: 1px solid #4398ED;
	border-bottom: none
}

.discussed_ul {
	float: left;
}

.discussed_div {
	float: left;
	margin-left: 400px;
}

.discussed_div span {
	color: #4398ED;
	font-size: 14px;
}

.discussed_div .spantype {
	font-weight: bolder;
	font-size: 20px;
}

.discuss_all {
	width: 643px;
	margin: 10px auto;
	height: 75px;
	border-bottom: 1px dashed #E5E5E5;
}

.image_div {
	float: left;
	margin: 15px;
}

.detail_div {
	/* float: left; */
	margin-top: 10px;
}

.detail_div_name a:hover {
	text-decoration: underline;
}

.detail_div_time {
	margin-top: -20px;
	margin-left: 450px;
	color: #C0C0C0;
	font-size: 12px;
}

.detail_div p {
	line-height: 40px;
	font-size: 14px;
	width: 400px;
	overflow：hidden;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		//点击畅言按钮
		$(".discuss_login input").click(function() {
			var uname = $("#uname").text();
			if (uname == null || uname == "") {
				window.location.href = "login";
			} else {
				var text = $(".discuss_text textarea").val();
				if (text == "来说两句..." || text == null || text == "") {
					alert("请输入你要发表的评论！");
				} else {
					$.ajax({
						url : "discussAjax",
						type : "GET",
						data : "text=" + text,
						success : function(data) {
						}
					});
				}
			}
		});

		$(".support").click(function() {
			$(".support img").attr("src","images/support3.png");
			$.ajax({
				url:"aboutNum",
				type:"GET",
				success:function(data){
					alert(data);
				}
			});
		});

	});
</script>
</head>
<body>
	<jsp:include page="header.jsp"></jsp:include>

	<!--中间正文部分-->
	<div class="center">
		<div class="center_one">
			<h1 class="h1_tilte">${articleByTitle.article_title }</h1>
			<div class="detail_info_box">
				<sapn>编辑时间：${articleByTitle.article_time } </sapn>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<sapn> 浏览量：${articleByTitle.article_readnumber } </sapn>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<sapn> 作者: ${articleByTitle.user_name }</sapn>
			</div>
			<div class="content">${articleByTitle.article_content }</div>

			<!--评论区-->
			<div class="discuss">
				<div class="discuss_text">
					<textarea cols="89" rows="7" style="color: #555555">来说两句...</textarea>
				</div>
				<div class="discuss_login">
					<div class="leftone">
						<span class="support"><img src="images/support1.png" width="30" height="30"></span>
					</div>
					<div class="lefttwo">
						<a href="javascript:void()"> <input type="button" value="畅言一下">
						</a>
					</div>
					<div style="clear: both"></div>
				</div>
			</div>
			<!--查看评论-->
			<div class="discussed">
				<div class="discussed_ul">
					<ul>
						<li>评论</li>
					</ul>
				</div>
				<div class="discussed_div">
					<span class="spantype">456</span><span>人参与,</span><span
						class="spantype">456</span><span>条评论</span>
				</div>
				<div style="clear: both"></div>
			</div>

			<c:forEach items="${queryAllDisscuss }" var="var">
				<div class="discuss_all">
					<div class="image_div">
						<img src="images/11111.gif" style="width: 42px; height: 42px;">
					</div>
					<div class="detail_div">
						<div class="detail_div_name">
							<span><a href="#" style="color: #4398ED; font-size: 14px;">${var.user_name }</a>
							</span>
							<div class="detail_div_time">${var.discuss_time }</div>
						</div>
						<p>${var.discuss_content }</p>
						<div class="detail_div_show"></div>
					</div>
					<div style="clear: both"></div>
				</div>
			</c:forEach>
			<!-- <div class="discuss_all">
				<div class="image_div">
					<img src="images/11111.gif" style="width: 42px; height: 42px;">
				</div>
				<div class="detail_div">
					<div class="detail_div_name">
						<span><a href="#" style="color: #4398ED; font-size: 14px;">心中有你</a>
						</span>
						<div class="detail_div_time">2018年3月1日 11:36</div>
					</div>
					<p>d67a21525db0a284db62b3f23af7ef28好的呀</p>
					<div class="detail_div_show"></div>
				</div>
			</div>
			<div class="discuss_all">
				<div class="image_div">
					<img src="images/11111.gif" style="width: 42px; height: 42px;">
				</div>
				<div class="detail_div">
					<div class="detail_div_name">
						<span><a href="#" style="color: #4398ED; font-size: 14px;">心中有你</a>
						</span>
						<div class="detail_div_time">2018年3月1日 11:36</div>
					</div>
					<p>d67a21525db0a284db62b3f23af7ef28好的呀</p>
					<div class="detail_div_show"></div>
				</div>
			</div>  -->

		</div>
		<div class="center_two1">
			<div class="center_two_detail">
				<p
					style="text-align: center; font-size: 16px; color: red; font-weight: bolder">你也想建立一个独立博客？</p>
				<p style="text-indent: 2em;">你是否也想打造一个在互联网上的个人品牌，成为一个家喻户晓的人物呢？</p>
				<p style="text-indent: 2em;">
					请点击了解 <a href="http://www.shaolianhu.com/11900.html">怎样创建个人博客</a>
				</p>
			</div>
			<div class="hot_recommend">
				<img src="images/hot-recommend-img.png" />
				<div class="display_two_plane">
					<div class="display_two_ul">
						<ul>
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
							<li><a href="#">web前端</a></li>
							<hr style="border: 0.5px dashed #919090;" />
						</ul>
					</div>
					<div class="display_two_ol1" style="top: -3pxs">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--评论框-->



</body>
</html>
